﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/User/ViewMasterPage.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <title>首页</title> 
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="LeftMenuContent" runat="server">
        <li class="active"><a href="/User/Index"><span class="glyphicon glyphicon-dashboard"></span> 首页</a></li>
		<li><a href="/User/Widgets"><span class="glyphicon glyphicon-th"></span> 医生</a></li>
		<li ><a href="/User/Charts"><span class="glyphicon glyphicon-stats"></span>实时数据</a></li>
		<li><a href="/User/Tables"> <span class="glyphicon glyphicon-list-alt"></span>数据历史</a></li>
		<li><a href="/User/Forms">  <span class="glyphicon glyphicon-pencil"></span>病历</a></li>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    	<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
		<div class="row">
			<ol class="breadcrumb">
				<li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
				<li class="active">首页</li>
			</ol>
		</div><!--/.row-->
		
		<div class="row">
			<div class="col-lg-12">
				<h1 class="page-header">首页</h1>
			</div>
		</div><!--/.row-->
        
        <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >网页模板</a></div>
	
        <div class="row">
            <div class="col-xs-12 col-md-6 col-lg-3">
                <div class="panel panel-blue panel-widget ">
                    <div class="row no-padding">
                        <div class="col-sm-3 col-lg-5 widget-left">
                            <em class="glyphicon glyphicon-shopping-cart glyphicon-l"></em>
                        </div>
                        <div class="col-sm-9 col-lg-7 widget-right">
                            <div class="large">120</div>
                            <div class="text-muted">设备数量</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-6 col-lg-3">
                <div class="panel panel-orange panel-widget">
                    <div class="row no-padding">
                        <div class="col-sm-3 col-lg-5 widget-left">
                            <em class="glyphicon glyphicon-comment glyphicon-l"></em>
                        </div>
                        <div class="col-sm-9 col-lg-7 widget-right">
                            <div class="large">52</div>
                            <div class="text-muted">通信数量</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-6 col-lg-3">
                <div class="panel panel-teal panel-widget">
                    <div class="row no-padding">
                        <div class="col-sm-3 col-lg-5 widget-left">
                            <em class="glyphicon glyphicon-user glyphicon-l"></em>
                        </div>
                        <div class="col-sm-9 col-lg-7 widget-right">
                            <div class="large">24</div>
                            <div class="text-muted">用户数量</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-6 col-lg-3">
                <div class="panel panel-red panel-widget">
                    <div class="row no-padding">
                        <div class="col-sm-3 col-lg-5 widget-left">
                            <em class="glyphicon glyphicon-stats glyphicon-l"></em>
                        </div>
                        <div class="col-sm-9 col-lg-7 widget-right">
                            <div class="large">25.2</div>
                            <div class="text-muted">记录数据</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/.row-->
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">数据记录曲线</div>
                    <div class="panel-body">
                        <div class="canvas-wrapper">
                            <canvas class="main-chart" id="line-chart" height="200" width="600"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/.row-->
        <div class="row">
            <div class="col-xs-6 col-md-3">
                <div class="panel panel-default">
                    <div class="panel-body easypiechart-panel">
                        <h4>设备访问量</h4>
                        <div class="easypiechart" id="easypiechart-blue" data-percent="92">
                            <span class="percent">92%</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="panel panel-default">
                    <div class="panel-body easypiechart-panel">
                        <h4>医生访问量</h4>
                        <div class="easypiechart" id="easypiechart-orange" data-percent="65">
                            <span class="percent">65%</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="panel panel-default">
                    <div class="panel-body easypiechart-panel">
                        <h4>用户访问量</h4>
                        <div class="easypiechart" id="easypiechart-teal" data-percent="56">
                            <span class="percent">56%</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="panel panel-default">
                    <div class="panel-body easypiechart-panel">
                        <h4>被监护人数</h4>
                        <div class="easypiechart" id="easypiechart-red" data-percent="27">
                            <span class="percent">27%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>						
		<div class="row">
			<div class="col-md-8">
			
				<div class="panel panel-default chat">
					<div class="panel-heading" id="accordion"><span class="glyphicon glyphicon-comment"></span> 聊天</div>
					<div class="panel-body">
						<ul id="ul_talk">
							
						</ul>
					</div>
					
					<div class="panel-footer">
						<div class="input-group">
							<input id="btn-input" type="text" class="form-control input-md" placeholder="Type your message here..." />
							<span class="input-group-btn">
								<button class="btn btn-success btn-md" id="btn-chat">发送</button>
							</span>
						</div>
					</div>
				</div>
				
			</div><!--/.col-->
			
			<div class="col-md-4">
			
				<div class="panel panel-blue">
					<div class="panel-heading dark-overlay"><span class="glyphicon glyphicon-check"></span>计划列表</div>
					<div class="panel-body">
						<ul class="todo-list" id="ul-list-add">
						</ul>
					</div>
					<div class="panel-footer">
						<div class="input-group">
							<input id="btn-input-add" type="text" class="form-control input-md" placeholder="添加新计划" />
							<span class="input-group-btn">
								<button class="btn btn-primary btn-md" id="btn-todo">添加</button>
							</span>
						</div>
					</div>
				</div>
								
			</div><!--/.col-->
		</div><!--/.row-->
	</div>	<!--/.main-->
</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="JsContent" runat="server">
<script>

    $(document).ready(function () {
        List();
        List_Plan();
    });

    $('#btn-chat').click(function () {
        $.post("/User/AddTalk", {
            "mess":$('#btn-input').val()
        }, function (data) {
            if (data == "OK") {
                List();
            }
            else {
                alert("发送失败");
            }
        });
    });

    function List_Plan() {
        $.post("/User/GetPlan", {}, function (data) {
            var html_list = new Array();
            var html_str = "";
            var i = 0;
            if (data) {
                for (i = 0; i < 10; i++) {
                    if (data[i]) {
                        html_list[i] = "<li class='todo-list-item'><div class='checkbox'><input type='checkbox' id='checkbox' /><label for='checkbox'>" + data[i].Plan + "</label></div><small class='text-muted'>" + data[i].Time_Str + "</small></li>";
                    }
                }
                $("#ul-list-add").html(html_list);
            }
        });
    };

    $('#btn-todo').click(function () {
        $.post("/User/AddPlan", {
            "mess": $('#btn-input-add').val()
        }, function (data) {
            if (data == "OK") {
                List_Plan();
            }
            else {
                alert("添加失败");
            }
        });
    });

    function List() {
        $.post("/User/GetTalk", {}, function (data) {
            var html_list = new Array();
            var html_str = "";
            var i = 0;
            if (data) {
                for (i = 0; i < 10; i++) {
                    if (data[i]) {
                        if (data[i].Talker == data[i].UserName) {
                            html_list[i] = "<li class='right clearfix'><span class='chat-img pull-right'><img src='http://placehold.it/80/dde0e6/5f6468' alt='User Avatar' class='img-circle' /></span><div class='chat-body clearfix'><div class='header'><strong class='pull-left primary-font'>" + data[i].Talker + "</strong> <small class='text-muted'>" + data[i].Time_Str + "</small></div><p>" + data[i].Talk + "</p></div></li>"; //data[i];
                        }
                        else {
                            html_list[i] = ("<li class='left clearfix'><span class='chat-img pull-left'><img src='http://placehold.it/80/30a5ff/fff' alt='User Avatar' class='img-circle' /></span><div class='chat-body clearfix'><div class='header'><strong class='primary-font'>" + data[i].Talker + "</strong> <small class='text-muted'>" + data[i].Time_Str + "</small></div><p>" + data[i].Talk + "</p></div></li>");
                        }
                    }
                }
                $("#ul_talk").html(html_list);
            }
        });
    }
    window.setInterval(List, 5000);
</script>
</asp:Content>